<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Glassmorphism Cards Hover Effects</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="box" data-color="clr1">
        <div class="imgBx">
          <img src="./images/img_01.jpg" />
        </div>
        <div class="glass">
          <h3>Someone<br /><span>SEO Expert</span></h3>
          <ul>
            <a href="#" style="--i: 1"
              ><ion-icon name="logo-linkedin"></ion-icon
            ></a>
            <a href="#" style="--i: 2"
              ><ion-icon name="logo-whatsapp"></ion-icon
            ></a>
            <a href="#" style="--i: 3"
              ><ion-icon name="logo-instagram"></ion-icon
            ></a>
          </ul>
        </div>
      </div>

      <div class="box" data-color="clr2">
        <div class="imgBx">
          <img src="./images/img_02.jpg" />
        </div>
        <div class="glass">
          <h3>Someone<br /><span>Magician</span></h3>
          <ul>
            <a href="#" style="--i: 1"
              ><ion-icon name="logo-linkedin"></ion-icon
            ></a>
            <a href="#" style="--i: 2"
              ><ion-icon name="logo-whatsapp"></ion-icon
            ></a>
            <a href="#" style="--i: 3"
              ><ion-icon name="logo-instagram"></ion-icon
            ></a>
          </ul>
        </div>
      </div>

      <div class="box" data-color="clr3">
        <div class="imgBx">
          <img src="./images/img_03.jpg" />
        </div>
        <div class="glass">
          <h3>Someone<br /><span>Graphic Designer</span></h3>
          <ul>
            <a href="#" style="--i: 1"
              ><ion-icon name="logo-linkedin"></ion-icon
            ></a>
            <a href="#" style="--i: 2"
              ><ion-icon name="logo-whatsapp"></ion-icon
            ></a>
            <a href="#" style="--i: 3"
              ><ion-icon name="logo-instagram"></ion-icon
            ></a>
          </ul>
        </div>
      </div>

      <div class="box" data-color="clr4">
        <div class="imgBx">
          <img src="./images/img_04.jpg" />
        </div>
        <div class="glass">
          <h3>Someone<br /><span>Actress</span></h3>
          <ul>
            <a href="#" style="--i: 1"
              ><ion-icon name="logo-linkedin"></ion-icon
            ></a>
            <a href="#" style="--i: 2"
              ><ion-icon name="logo-whatsapp"></ion-icon
            ></a>
            <a href="#" style="--i: 3"
              ><ion-icon name="logo-instagram"></ion-icon
            ></a>
          </ul>
        </div>
      </div>
    </div>
    <script
      type="module"
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>
